<template>
  <div class="carousel-wrapper">
    <!-- 背景层（上下两部分） -->
    <div
      class="half-bg"
      :style="{ backgroundColor: module.props.bgColor || '#fff' }"
    ></div>
    <div class="bottom-bg"></div>

    <!-- 轮播图 -->
    <el-carousel
      :interval="3000"
      :autoplay="module.props.autoplay"
      height="200px"
    >
      <el-carousel-item
        v-for="(banner, idx) in visibleBanners"
        :key="idx"
        class="carousel-item"
      >
        <!-- <a :href="banner.url" class="banner-link"> -->
          <img :src="banner.image" class="carousel-image" />
          <div class="banner-title">{{ banner.title }}</div>
        </a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>


<script>
export default {
  props: ["module"],
  computed: {
    visibleBanners() {
      // 只展示 status 为 "up" 的
      return (this.module.props.banners || []).filter(
        (b) => b.status !== "down"
      );
    },
  },
};
</script>


<style scoped>
.carousel-wrapper {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.half-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 50%;
  width: 100%;
  z-index: 0;
}

.bottom-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
  width: 100%;
  background-color: rgb(242, 246, 252);
  z-index: 0;
}

.carousel-item {
  position: relative;
  z-index: 1;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-image {
  width: 95%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.banner-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.banner-title {
  position: absolute;
  bottom: 12px;
  left: 16px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
</style>
